<template>
    <div class="box1">
        <div class="title">
            <p>男女比例</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="sex">
            <div class="man">
                <img src="../../images/man.png" alt="">
            </div>
            <div class="women">
                <img src="../../images/woman.png" alt="">
            </div>
        </div>
        <div class="rate">
            <p>男生58%</p>
            <p>女生42%</p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script lang="ts" setup name="Sex">
    import * as echarts from 'echarts'
    import {ref,onMounted} from 'vue'

    // 获取图形图标的Dom节点
    let charts=ref()

    onMounted(()=>{
        // 初始化echarts实例
        let mycharts=echarts.init(charts.value)
        // 配置配置项
        mycharts.setOption({
            // 标题组件
            title:{
                text:'男女比例',
                textStyle:{
                    color:'skyblue'
                },
                left:'40%',
            },
            xAxis:{
                show:false,
                min:0,
                max:100
            },
            yAxis:{
                show:false,
                type:'category'
            },
            series:[
                {
                    type:'bar',
                    data:[58],
                    barWidth:20,
                    z:100,
                    itemStyle:{
                        color:'skyblue',
                        borderRadius:20
                    }
                },
                {
                    type:'bar',
                    data:[100],
                    barWidth:20,
                    // 调整女生柱条位置
                    barGap:'-100%',
                    itemStyle:{
                        color:'pink',
                        borderRadius:20
                    }
                }
            ],
            grid:{
                left:0,
                right:0,
                top:0,
                bottom:0
            }
        })
    })
</script>

<style scoped lang="scss">
    .box1{
        width: 100%;
        height: 100%;
        background: url(../../images/dataScreen-main-cb.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0px;

        .title{
            margin-left: 20px;
            p{
                color: white;
                font-size: 20px;
            }
        }

        .sex{
                display: flex;
                justify-content: center;
                .man{
                    margin: 20px;
                    width: 111px;
                    height: 115px;
                    background: url(../../images/man-bg.png) no-repeat;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .women{
                    margin: 20px;
                    width: 111px;
                    height: 115px;
                    background: url(../../images/woman-bg.png) no-repeat;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
        }

        .rate{
            display: flex;
            justify-content: space-between;
            color: white;
        }

        .charts{
            height: 100px;
        }
    }
    
</style>